<!--
 * @Description: 风险预警
 * @Author: Huang Junjie
 * @Date: 2021-06-01 17:02:15
 * @LastEditTime: 2021-07-29 21:52:28
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div class="risk-early-warning-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" />
      <!-- 四角样式 -->

      <!-- 标题栏 -->
      <div class="title">
        <div class="point-icon" />
        <span>风险预警</span>
        <div
          class="more-btn"
        >
          共 {{ riskWarning.length }} 条
          <!-- <i class="el-icon-arrow-right" /> -->
        </div>
      </div>
      <!-- 标题栏 -->

      <!-- 列表 -->
      <!-- <el-scrollbar> -->
      <div ref="riskWarning" class="data-list-div" @click="showRiskWarning($event)">
        <vue-seamless-scroll
          class="seamless-warp"
          :data="riskWarning"
          :class-option="seamlessScrollclassOption"
        >
          <ul class="item">
            <div
              v-for="(item, index) in riskWarning"
              :key="`a${index}`"
              ref="riskWarningItem"
              :data-index="index"
              class="data-list"
            >
              <div v-if="item !== null" class="link-style" :data-index="index">
                <el-row :data-index="index">
                  <el-col :span="2" :data-index="index">
                    <div class="spot-img-style" :data-index="index">
                      <img width="16px" height="16px" :src="require('@/assets/images/jjxt/production-safety/segment-level-home/warning-icon.png')">
                    </div>
                  </el-col>
                  <el-col class="link-title-div" :span="17" :data-index="index">
                    <div class="link-title" :data-index="index" :title="item.title.length>30?item.title.replace(/[<p>|<p/>]/g, ''):''">{{ item.title }}</div>
                  </el-col>
                  <el-col :span="5" :data-index="index">
                    <span class="link-date" :data-index="index">{{ getDatatime(new Date(item.updateTime), 0, 10) }}</span>
                  </el-col>
                </el-row>
              </div>
            </div>
          </ul>
        </vue-seamless-scroll>
      </div>
      <!-- </el-scrollbar> -->
      <!-- 列表 -->
    </div>
  </div>
</template>

<script>
import { getLoginUserIdPath } from '@/api/jjxt/production-safety/segment-level-home';
import { getDatatime } from '@/utils';
import Socket from '@/utils/socket';
import vueSeamlessScroll from 'vue-seamless-scroll';

export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      userIdPath: '',
      riskWarning: [],
      riskWarningMoveNum: 0
    };
  },
  computed: {
    seamlessScrollclassOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: false, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  mounted() {
    this.getLoginUserIdPath(); // 获取登入人的idPath，最多只精确到段
  },
  beforeDestroy() {
    this.socket.close();
  },
  methods: {
    getDatatime,

    // 获取登入人的idPath，最多只精确到段
    getLoginUserIdPath() {
      getLoginUserIdPath().then((response) => {
        this.userIdPath = response.data;
        this.initSocket();
      });
    },

    initSocket() {
      this.socket = new Socket();
      this.socket.open();

      this.socket.addEventListener('onopen', _ => {
        this.socket.sendMessage('PAGE_HEALTH');
      });
      this.socket.addEventListener('PAGE_HEALTH', data => {
        switch (data.key) {
          case 'WARNING':
            var tempArr = [];
            for (var i in data.datas) {
              for (var j in data.datas[i].units) {
                if (data.datas[i].units[j].idPath === this.userIdPath) {
                  tempArr.unshift(data.datas[i]);
                }
              }
            }
            this.riskWarning = tempArr;
            this.$nextTick(_ => {
              if (this.$refs.riskWarningItem && this.$refs.riskWarningItem[0] && this.$refs.riskWarningItem[0].parentNode.offsetHeight > this.$refs.riskWarning.offsetHeight) {
                this.riskWarningMoveNum = this.riskWarning.length;
              } else {
                this.riskWarningMoveNum = Math.floor(this.$refs.riskWarning.offsetHeight / 30);
              }
            });
            break;
        }
      });
    },

    // 风险预警详情
    showRiskWarning(e) {
      // 通过 e.target获取点击的dom
      // 通过e.target.dataset获取vuedom中的自定义属性
      const data = e.target.dataset;
      const dialog = {
        title: '风险预警',
        visible: true,
        list: this.riskWarning,
        index: data.index
      };
      this.$emit('openDialog', dialog);
    }
  }
};
</script>

<style lang="scss" scoped>
.risk-early-warning-style {
  position: relative;
  color: white;
  width: 454px;
  box-sizing: border-box;
  overflow: hidden;
  .component-inner-div {
    border: 2px solid #122a57;
    height: 100%;
    background-color: rgba($color: #0a1944, $alpha: 0.9);
    box-sizing: border-box;
    .title {
      color: #3695FF;
      font-size: 20px;
      padding: 0;
      margin: 20px 16px 0 16px;
      padding-bottom: 16px;
      align-items: center;
      display: flex;
      border-bottom: 1px solid #0b62a3;
      .point-icon {
        background-color: #3695FF;
        height: 10px;
        width: 10px;
        margin: 0 10px 0 0;
      }
      .more-btn {
        position: absolute;
        right: 20px;
        color: #eaea4d;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .el-scrollbar {
      position: absolute;
      top: 65px;
      left: 0;
      right: 0;
      bottom: 3px;
      ::v-deep .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    .data-list-div {
      margin-top: 5px;
      .seamless-warp{
        height: 100%;
        overflow: hidden;
      }
      .data-list {
        cursor: pointer;
        padding: 8px 20px 8px 20px;
        // display: flex;
        align-items: center;
        .link-style {
          .spot-img-style {
            height: 10px;
          }
          .spot-style {
            width: 5px;
            height: 5px;
            background-color: #ffffff;
            border-radius: 5px;
            margin: 7px 10px 0 9px;
          }
          .link-title-div {
            padding-right: 5px;
            font-size: 14px;
            .link-title {
              color: #fcfeff;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .link-date {
            white-space: nowrap;
            font-size: 14px;
            color: #b7b9c0;
          }
        }
      }
    }
  }
}
</style>
